<h2 class="page-header-left" *ngIf="loadedConfiguration">Configuration: {{ configuration.name }}</h2>
<mat-tab-group dynamicHeight>
  <mat-tab label="Summary">
    <mat-card class="card-large mat-elevation-z8" *ngIf="loadedConfiguration">
      <mat-card-header>
        <mat-card-title>Summary</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table>
          <tbody>
            <tr>
              <td class="table-label">Name</td>
              <td class="table-data">{{ configuration.name }}</td>
            </tr>
            <tr>
              <td class="table-label">Kind</td>
              <td class="table-data">{{ configuration.kind }}</td>
            </tr>
            <tr>
              <td class="table-label">Created</td>
              <td class="table-data">{{ configuration.created }}</td>
            </tr>
            <tr>
              <td class="table-label">Age</td>
              <td class="table-data">{{ configuration.age }}</td>
            </tr>
            <tr>
              <td class="table-label">Tracing Enabled</td>
              <td class="table-data">{{ configuration.tracingEnabled }}</td>
            </tr>
            <tr>
              <td class="table-label">Sampling Rate</td>
              <td class="table-data">{{ configuration.samplingRate }}</td>
            </tr>
            <tr>
              <td class="table-label">Metrics Enabled</td>
              <td class="table-data">{{ configuration.metricsEnabled }}</td>
            </tr>
            <tr>
              <td class="table-label">MTLS Enabled</td>
              <td class="table-data">{{ configuration.mtlsEnabled }}</td>
            </tr>
            <tr *ngIf="configuration.mtlsEnabled">
              <td class="table-label">WorkloadCert TTL</td>
              <td class="table-data">{{ configuration.mtlsWorkloadTTL }}</td>
            </tr>
            <tr *ngIf="configuration.mtlsEnabled">
              <td class="table-label">Clock Skew</td>
              <td class="table-data">{{ configuration.mtlsClockSkew }}</td>
            </tr>
          </tbody>
        </table>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Applications" *ngIf="platform === 'kubernetes'">
    <mat-card class="card-large mat-elevation-z8" *ngIf="loadedConfiguration && loadedApps">
      <mat-card-header>
        <mat-card-title>Applications configured with <strong>{{ configuration.name }}</strong></mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-nav-list *ngIf="configurationApps && configurationApps.length > 0; else noApps">
          <a mat-list-item routerLink="/overview/{{configApp.appID}}" *ngFor="let configApp of configurationApps">{{ configApp.appID }}</a>
        </mat-nav-list>
        <ng-template #noApps>
          <p class="page-text">No Dapr applications found using this configuration</p>
        </ng-template>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Configuration" *ngIf="loadedConfiguration">
    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
      <app-editor [(model)]="configurationManifest"></app-editor>
    </mat-card>
  </mat-tab>
</mat-tab-group>